<template>
    <div class='page'>
        <TopHeader></TopHeader>
        <main class='body'>
            <div class='body-container'>
                <section class='left-part'>
                    <div class='card-box left-card-box-1'>
                        <section>
                            <div class='relative'>
                                <h3 class='module-title'>代理商收入排行总榜(TOP5)</h3>
                                <div class='date-type'>
                                    <DataType v-model="dateType.agentDateType" @change='getAgentRankData'></DataType>
                                </div>
                            </div>
                            <div class='agent-rank'>
                                <table class='agent-rank-table'>
                                    <tr>
                                        <th></th>
                                        <th>代理商</th>
                                        <th>收入(元)</th>
                                        <th>设备数</th>
                                        <th>充电口数</th>
                                    </tr>
                                    <template v-for='(item, index) in agentRankData' :key='index'>
                                        <tr>
                                            <td class='no' :class='"no-" + index'>{{index + 1}}.</td>
                                            <td>{{item.name}}</td>
                                            <td class='income'>{{item.income}}</td>
                                            <td class='device'>{{item.deviceCount}}</td>
                                            <td class='port-count'>{{item.portCount}}</td>
                                        </tr>
                                    </template>
                                </table>
                            </div>
                        </section>
                        <section class='end-reason'>
                            <div class='relative'>
                                <h3 class='module-title'>充电结束原因</h3>
                                <div class='date-type'>
                                    <DataType v-model="dateType.orderReasonDateType" @change='getFinishReasonData'></DataType>
                                </div>
                            </div>
                            <div class='wrap'>
                                <FinishReasonChart v-model='finishReasonData'></FinishReasonChart>
                            </div>
                        </section>
                    </div>

                    <div class='card-box left-card-box-2'>
                        <div style='position:relative;'>
                            <h3 class='module-title'>充电时长分布</h3>
                            <div class='legend'>
                                <XColorBlockText type='square' color='#20c0fd'>订单笔数</XColorBlockText>
                                <XColorBlockText class='m-l-30' type='line' color='#59ffaf'>占比</XColorBlockText>
                            </div>
                        </div>
                        <div class='flex-1'>
                            <ChargeTimeLongChart v-model='chargeTimeLongData'></ChargeTimeLongChart>
                        </div>
                    </div>

                </section>
                <section class='center-part'>
                    <div class='center-part-1'>
                        <div class='part-1'>
                            <div class='today-data'>
                                <div class='item'>
                                    <div class='name'>今日收入流水</div>
                                    <div>
                                        <CountTo class='num' :decimals='2' :startVal='overviewData.todayIncome.prev' :endVal='overviewData.todayIncome.value'></CountTo>
                                        <span class="unit">元</span>
                                    </div>
                                </div>
                                <div class='item'>
                                    <div class='name'>今日订单</div>
                                    <div>
                                        <CountTo class='num' :startVal='overviewData.todayOrderCount.prev' :endVal='overviewData.todayOrderCount.value'></CountTo>
                                        <span class="unit">笔</span>
                                    </div>
                                </div>
                                <div class='item'>
                                    <div class='name'>今日新增用户</div>
                                    <div>
                                        <CountTo class='num' :startVal='overviewData.todayNewUserCount.prev' :endVal='overviewData.todayNewUserCount.value'></CountTo>
                                        <span class="unit">位</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class='data-grid'>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">总运营流水</div>
                                        <div>
                                            <CountTo class='num' :decimals='0' :startVal='overviewData.totalIncome.prev' :endVal='overviewData.totalIncome.value'></CountTo>
                                            <span class="unit">万元</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">入驻城市</div>
                                        <div>
                                            <CountTo class='num' :startVal='overviewData.cityCount.prev' :endVal='overviewData.cityCount.value'></CountTo>
                                            <span class="unit">座</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">在线设备数</div>
                                        <div>
                                            <CountTo class='num' :startVal='overviewData.onlineDeviceCount.prev' :endVal='overviewData.onlineDeviceCount.value'></CountTo>
                                            <span class="unit">台</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">充电口数</div>
                                        <div>
                                            <CountTo class='num' :startVal='overviewData.devicePortCount.prev' :endVal='overviewData.devicePortCount.value'></CountTo>
                                            <span class="unit">个</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">充电口日均收入</div>
                                        <div>
                                            <CountTo class='num' :decimals='2' :startVal='overviewData.portDayIncome.prev' :endVal='overviewData.portDayIncome.value'></CountTo>
                                            <span class="unit">元</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='wrap'>
                                    <div class='content'>
                                            <div class="name">减少碳排量</div>
                                        <div>
                                            <CountTo class='num' :startVal='overviewData.carbonCount.prev' :endVal='overviewData.carbonCount.value'></CountTo>
                                            <span class="unit">吨</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class='center-part-2'>
                        <div class='card-box flex-column h-100'>
                            <div class='map-container'>
                                <Map v-model='mapWarnData'></Map>
                            </div>
                        </div>

                        <div class='order-list'>
                            <template v-for='(item, index) in orderList' :key='index'>
                                <div class='item' :class='{start : item.type == 1, fail : item.type == 2, end : item.type == 3}'>
                                    <div class='icon' :class='{device_1 : item.deviceType == 1, device_2 : item.deviceType == 2, device_3 : item.deviceType == 7 || item.deviceType == 9}'></div>
                                    <div class='m-l-10'>{{item.msg}}</div>
                                </div>
                            </template>
                        </div>

                    </div>

                </section>
                <section class='right-part'>
                    <div class='right-card-box-1'>
                        <div class='card-box flex-column h-100'>
                            <div class='relative'>
                                <h3 class='module-title'>各省份订单排行TOP10<span class='f-14'>（元）</span></h3>
                                <div class='date-type'>
                                    <DataType v-model="dateType.provinceRankDateType" @change='getProvinceOrderRankData'></DataType>
                                </div>
                            </div>
                            <div class='flex-1 m-t-20'>
                                <ProvinceOrderRankChart v-model='provinceOrderRankData'></ProvinceOrderRankChart>
                            </div>
                        </div>
                    </div>
                    
                    <div class='right-part-2'>
                        <div class='right-card-box-2'>
                            <div class='card-box flex-column h-100'>
                                <div class='relative'>
                                    <XColorBlockText type='square' color='#69baf9'>充电笔数</XColorBlockText>
                                    <XColorBlockText class='m-l-30' type='square' color='#c22929'>使用率</XColorBlockText>
                                    <div class='date-type'>
                                        <DataType v-model="dateType.useRateDateType" @change='getChargeCountUseRateData'></DataType>
                                    </div>
                                </div>
                                <div class='flex-1 m-t-10'>
                                    <ChargeCountUseRateChart v-model='chargeCountUseRateData'></ChargeCountUseRateChart>
                                </div>
                            </div>
                        </div>
                        
                        <div class='right-card-box-3'>
                            <div class='card-box flex-column h-100'>
                                <h3 class='module-title'>支付类型</h3>
                                <div class='flex-1'>
                                    <PayTypeChart v-model='payTypeData'></PayTypeChart>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>
</template>

<script lang='ts'>
    import TopHeader from './TopHeader.vue'
    import { defineComponent, reactive, ref, toRef, computed } from "vue";
    import { CountTo } from 'vue3-count-to/dist/vue3-count-to.js';
    import DataType from './DataType.vue'
    import FinishReasonChart from './chart/FinishReasonChart.vue'
    import ChargeTimeLongChart from './chart/ChargeTimeLongChart.vue'
    import ProvinceOrderRankChart from './chart/ProvinceOrderRankChart.vue'
    import ChargeCountUseRateChart from './chart/ChargeCountUseRateChart.vue'
    import PayTypeChart from './chart/PayTypeChart.vue'
    import Map from './chart/Map.vue'


    import DATALIST from '../../data.json'
    console.log(DATALIST)

    export default defineComponent({
        components : {
            TopHeader,
            CountTo,
            DataType,
            FinishReasonChart,
            ChargeTimeLongChart,
            ProvinceOrderRankChart,
            ChargeCountUseRateChart,
            PayTypeChart,
            Map
        },
        setup() {
            let dateType = reactive({
                agentDateType : 0,
                orderReasonDateType : 0,
                provinceRankDateType : 0,
                useRateDateType : 0
            })
            let state = reactive({
                s : 0,
                e : 10000,
            })

            let overviewData = reactive({
                todayIncome : {
                    prev : 0,
                    value : 0
                },
                todayOrderCount :  {
                    prev : 0,
                    value : 0
                },
                todayNewUserCount :  {
                    prev : 0,
                    value : 0
                },

                totalIncome :  {
                    prev : 0,
                    value : 0
                },
                cityCount :  {
                    prev : 0,
                    value : 0
                },
                onlineDeviceCount :  {
                    prev : 0,
                    value : 0
                },
                devicePortCount :  {
                    prev : 0,
                    value : 0
                },
                portDayIncome :  {
                    prev : 0,
                    value : 0
                },
                carbonCount :  {
                    prev : 0,
                    value : 0
                }

            })

            let mapOrderList = reactive([])
            let mapWarnData = reactive([])
            let agentRankData = ref<any[]>([{"name":"深圳市XXX技有限公司","income":4434.13,"deviceCount":174,"portCount":1572},{"name":"深圳市XXX技有限公司","income":4279.43,"deviceCount":739,"portCount":7728},{"name":"深圳市XXX技有限公司","income":3659.54,"deviceCount":240,"portCount":2400},{"name":"深圳市XXX技有限公司","income":2905.15,"deviceCount":4,"portCount":8},{"name":"深圳市XXX技有限公司","income":1473.54,"deviceCount":97,"portCount":888}]) //代理商排名
            let finishReasonData = ref<any>(null) //
            let chargeTimeLongData = ref<any>(null) //
            let provinceOrderRankData = ref<any>(null) //
            let chargeCountUseRateData = ref<any>(null) //
            let payTypeData = ref<any>(null) //支付类型
            
            let orderList = reactive([])
			
			
			function getAgentRankData(t) {
				//type == 11 || type == 12 || type == 13
				var type = 0
				switch(t) {
					case 0 : type = 11; break;
					case 1 : type = 12; break;
					case 2 : type = 13; break;
				}
				ws.send(JSON.stringify({ type }))
			}
			
			function getFinishReasonData(t) {
				//type == 21 || type == 22 || type == 23
				var type = 0
				switch(t) {
					case 0 : type = 21; break;
					case 1 : type = 22; break;
					case 2 : type = 23; break;
				}
				finishReasonData.value = null
				ws.send(JSON.stringify({ type }))
			}
			
			function getProvinceOrderRankData(t) {
				//type == 61 || type == 62 || type == 63
				var type = 0
				switch(t) {
					case 0 : type = 61; break;
					case 1 : type = 62; break;
					case 2 : type = 63; break;
				}
				provinceOrderRankData.value = null
				ws.send(JSON.stringify({ type }))
			}
			
            function getChargeCountUseRateData(t) {
				//type == 51 || type == 52 || type == 53
				var type = 0
				switch(t) {
					case 0 : type = 51; break;
					case 1 : type = 52; break;
					case 2 : type = 53; break;
				}
				chargeCountUseRateData.value = null
				ws.send(JSON.stringify({ type }))
			}

            setInterval(() => {
                var i = 0
                var len = mapOrderList.length
                mapWarnData.splice(0)
                for(let i = 0; i < len; i ++) {
                    mapWarnData.push(mapOrderList.shift())
                }
            }, 1500)


            

            

            setTimeout(() => {
                DATALIST.forEach(data => {
                    try {
                       
                        //DATALIST.push(data)
                        let type = data.type
                        let message:any = data.message


                        {
                            if(type == 11 || type == 12 || type == 13) {
                                
                                let row = message.map(item => ({name : item.agentName, income : item.amount, deviceCount : item.deviceCount, portCount : item.portCount}))
                                console.log(JSON.stringify(row))
                                agentRankData.value = row
                                return
                            }
                        }

                        {
                            if(type == 21 || type == 22 || type == 23) {
                                let row = message.map(item => ({name : item.chargeResultText, type : item.chargeResult, value : item.orderCount, rate : item.proportion}))
                                finishReasonData.value = row
                                return
                            }

                        }
                        

                        { 
                            if(type == 31) {
                                let row = {
                                    long : [],
                                    count : [],
                                    rate : []
                                }

                                message.forEach(item => {
                                    row.long.push(item.coordinate)
                                    row.count.push(item.orderCount || 0)
                                    row.rate.push(item.proportion || 0)
                                })

                                chargeTimeLongData.value = row

                                return
                            }
                        }

                        {
                            if(type == 61 || type == 62 || type == 63) {
                                let row = {
                                    province : [],
                                    count : []
                                }

                                //message = JSON.parse(message)
                                message.sort(function(a, b) {
                                    return a.amount - b.amount
                                })
                                message.forEach(item => {
                                    row.province.push(item.city.substr(0, 2))
                                    row.count.push(item.amount)
                                })
                                
                                provinceOrderRankData.value = row
                                
                                return
                            }

                        }

                        {
                            if(type == 51 || type == 52 || type == 53) {
                                let row = {
                                    date : [],
                                    count : [],
                                    rate : []
                                }
                                message.forEach(item => {
                                    row.date.push(String(item.time).padStart(2, '0') + ':00')
                                    row.count.push(item.orderCount || 0)
                                    row.rate.push(item.rate || 0)
                                })

                                chargeCountUseRateData.value = row

                                return
                            }
                        }

                        { //支付类型
                            if(type == 41) {
                                let row:any[] = []
                                message.forEach(item => {
                                    row.push({name : item.payTypeText, value : item.orderCount || 0, rate : item.rate || 0})
                                })

                                payTypeData.value = row

                                console.log(payTypeData.value)

                                return
                            }
                            
                        }


                        if(type == 71) {
                           
                            overviewData.totalIncome.prev = overviewData.totalIncome.value
                            overviewData.totalIncome.value = Number(message.allAmount)

                           
                            overviewData.cityCount.prev = overviewData.cityCount.value
                            overviewData.cityCount.value = Number(message.cityCount)

                            
                            overviewData.onlineDeviceCount.prev = overviewData.onlineDeviceCount.value
                            overviewData.onlineDeviceCount.value = Number(message.onlineDeviceCount)

                            
                            overviewData.devicePortCount.prev = overviewData.devicePortCount.value
                            overviewData.devicePortCount.value = Number(message.onlinePortCount)

                            
                            overviewData.portDayIncome.prev = overviewData.portDayIncome.value
                            overviewData.portDayIncome.value = Number(message.portDayAmountAvg)

                            //减少碳排量
                            overviewData.carbonCount.prev = overviewData.carbonCount.value
                            overviewData.carbonCount.value = Number(message.carbonEmission)

                            return
                        }
                        
                        
                        if(type == 4) {
                            
                            overviewData.todayIncome.prev = overviewData.todayIncome.value
                            overviewData.todayIncome.value = Number(message)
                            
                            return
                        }
                        
                        if(type == 5) {
                            
                            overviewData.todayOrderCount.prev = overviewData.todayOrderCount.value
                            overviewData.todayOrderCount.value = Number(message)
                            
                            return
                        }
                        
                        if(type == 6) {
                            
                            overviewData.todayNewUserCount.prev = overviewData.todayNewUserCount.value
                            overviewData.todayNewUserCount.value = Number(message)
                            
                            return
                        }



                        if(type == 1 || type == 2 || type == 3) {
                            orderList.unshift({type : type, deviceType : data.deviceType, msg : data.message});
                            if(orderList.length > 10) {
                                orderList.splice(10)
                            }

                            const longitude = Number(data.longitude)
                            const latitude = Number(data.latitude)

                            if(longitude && latitude && !isNaN(longitude) && !isNaN(latitude)) {
                                let d = new Date()
                                mapOrderList.push({time : d.getTime() + 3000, longitude, latitude,msg : data.message, type : type})
                            }

                        }
                    } catch (error) {
                        
                    }
                })
            }, 1000)

            setInterval(() => {
                overviewData.totalIncome.prev = overviewData.totalIncome.value
                overviewData.totalIncome.value += 30

                overviewData.todayIncome.prev = overviewData.todayIncome.value
                overviewData.todayIncome.value += 17.9

                const logs = [
                    {
                        "deviceType": 1,
                        "latitude": "0",
                        "longitude": "0",
                        "message": "13:46:37，1901080008/6号端口，充电359分钟，消费￥1.99,结算完成",
                        "result": 5,
                        "type": 3
                    },
                    
                    {
                        "deviceType": 1,
                        "latitude": "21.156749725341797",
                        "longitude": "110.29399871826172",
                        "message": "13:46:36，2102245023/6号端口，套餐3.00元720分钟，下单成功",
                        "type": 1
                    },
                    {
                        "deviceType": 1,
                        "latitude": "22.543099",
                        "longitude": "114.057868",
                        "message": "13:46:37，2010165002/17号端口，套餐2.00元360分钟，下单成功",
                        "type": 1
                    },
                    {
                        "deviceType": 1,
                        "latitude": "0",
                        "longitude": "0",
                        "message": "13:46:37，1812040087/5号端口，套餐1.20元120分钟，下单成功",
                        "type": 1
                    }
                ]

                logs.forEach(data => {
                    const type = data.type
                    orderList.unshift({type : type, deviceType : data.deviceType, msg : data.message});
                    if(orderList.length > 10) {
                        orderList.splice(10)
                    }

                    const longitude = Number(data.longitude)
                    const latitude = Number(data.latitude)

                    if(longitude && latitude && !isNaN(longitude) && !isNaN(latitude)) {
                        let d = new Date()
                        mapOrderList.push({time : d.getTime() + 3000, longitude, latitude,msg : data.message, type : type})
                    }
                })


                

            }, 5000)
            


            return {
                ...state,
                dateType,
                agentRankData,
                finishReasonData,
                chargeTimeLongData,
                provinceOrderRankData,
                chargeCountUseRateData,
                payTypeData,
                mapWarnData,

                overviewData,
                orderList,
				
				
				
				getAgentRankData,
				getFinishReasonData,
				getProvinceOrderRankData,
                getChargeCountUseRateData
            }

        },
    })
</script>


<style scoped lang='scss' src='./index.scss'></style>